<template>
	<view class="conter">
		<view class="conterone">
			<view class="tian-avatar" @click="onChooseHeader">
				<u--image width="140rpx" height="140rpx" radius="50%" :src="imgUrl + avatarImg" alt=""></u--image>
			</view>
			<view class="title-class" @click="onChooseHeader">选择天团头像</view>
			<view class="input">
				<u--input class="icon-pass" color="#fff" v-model="uniName" placeholder="请输入天团昵称" border="surround"></u--input>
			</view>
			<view class="vehicle" @click="checkName">检测</view>
			<view class="demand">
				<view class="need-box">加入要求 :</view>
				<view class="">
					<uni-data-select class="select" :clear="false" v-model="value" :localdata="option"></uni-data-select>
				</view>
			</view>
			<view class="demandone text-center">
				<u--image width="26rpx" height="26rpx" radius="3rpx" v-show="!checked" @click="onchecked" class="group" src="../../static/images/nocheck.png" alt=""></u--image>
				<u--image width="26rpx" height="26rpx" radius="3rpx" v-show="checked" @click="onchecked" class="group" src="../../static/images/checked.png" alt=""></u--image>
				<text>我已阅读并同意</text>
				<text @click="goCreateGuildRule">天团创建手册</text>
			</view>

			<view @click="open" class="buttons">立即创建</view>
			<!-- 弹出层 -->
			<u-popup bgColor="transparent" :show="show" :round="26" mode="center" @close="cancel">
				<view class="close">
					<view class="uniName">创建天团</view>
					<view class="clmona">您确定要消耗888个金豆创建天团吗？</view>
					<view class="clpmklj">
						<button v-on:click="cancel" style="background: #ff5359">取消</button>
						<button @click="confirmCreateGuild" style="color: #353535">确定</button>
					</view>
				</view>
			</u-popup>
			<!-- 弹出层 -->
		</view>
	</view>
</template>

<script>
import { detectionGuildNameLegal, createGuildSetting, createGuild } from '@/api/union/union.js';
import { uploadAvatar } from '@/api/account/account.js';
import config from '@/config';
import { getToken, getUserAdmin, setUserAdmin } from '@/utils/auth';
import cryptoUtils from '@/utils/cryptoUtils'; //引入静态变量
import { toast } from '@/utils/common';
import { updateAvatar } from '@/api/account/account.js';

const baseUrl = config.baseUrl;
const imgUrl = config.imgUrl;
export default {
	data() {
		return {
			show: false,
			imgUrl: config.imgUrl,
			value: 1,
			uniName: '',
			checked: false,
			uniId: '',
			radiovalue1: '苹果',
			avatarImg: '', //头像地址
			option: [
				{
					text: 'Duck',
					value: 0
				},
				{
					text: 'Duck',
					value: 1
				},
				{
					text: 'Duck',
					value: 2
				}
			]
		};
	},
	created() {
		this.setCreateGuild();
	},
	methods: {
		onChooseHeader() {
			let _this = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册和拍照
				success: function (res) {
					const tempFilePaths = res.tempFilePaths;
					uni.uploadFile({
						url: baseUrl + '/uploadController/open/ossUploadCustomizeFileName',
						filePath: tempFilePaths[0],
						name: 'file',
						formData: {
							folderName: 'avatar'
						},
						header: {
							Authorization: getToken()
						},
						success: (uploadFileRes) => {
							let res = JSON.parse(uploadFileRes.data);
							res.data = cryptoUtils.decrypt(res.data);
							console.log(res, '头像');
							if (res.code == 200) {
								_this.avatarImg = res.data[0];
								console.log(_this.avatarImg, '头像');
								// if (res.data[0]) {
								// 	_this.avatarImg = imgUrl + res.data[0];
								// 	console.log(this.avatarImg);
								// }
							} else {
								toast(res.msg);
							}
						}
					});
				}
			});
		},
		cancel() {
			this.show = false;
		},
		goCreateGuildRule() {
			uni.navigateTo({
				url: '/pages/Union/CreateGuildRule'
			});
		},
		open() {
			if (this.avatarImg == '') {
				this.$modal.showToast('天团头像不能为空！');
			} else if (this.uniName == '') {
				this.$modal.showToast('天团名称不能为空！');
			} else if (this.checked == false) {
				this.$modal.showToast('请先阅读并同意天团创建手册');
			} else {
				this.show = true;
			}
		},
		// 检查名字
		async checkName() {
			if (this.uniName == '') {
				this.$modal.showToast('天团名称不能为空！');
			} else {
				const data = await detectionGuildNameLegal(this.uniName);
				this.$modal.showToast(data.data);
			}
		},
		// 加入工会的条件
		async setCreateGuild() {
			const data = await createGuildSetting();
			// console.log(data, 'pppp');
			if (data.code === 200) {
				if (data.data) {
					data.data.forEach((e) => {
						e.text = 'Duck *' + e.value;
						e.value = e.id;
					});
				}
				this.option = data.data;
			} else {
				this.$modal.showToast(data.msg);
			}
		},
		// 创建天团
		async confirmCreateGuild() {
			let param = {};
			param.guildAvatar = this.avatarImg;
			param.uniName = this.uniName;
			param.value = this.value;
			const res = await createGuild(param);
			this.show = false;
			if (res.code === 200) {
				this.$modal.showToast('创建天团成功');
				setTimeout(function() {
					uni.redirectTo({
						url: "/pages/tiantuan/tiantuan"
					});
				}, 1000)
			} else {
				this.$modal.showToast(data.msg);
			}
		},
		onchecked() {
			if (this.checked == false) {
				this.checked = true;
			} else if (this.checked == true) {
				this.checked = false;
			}
		},
		goGuild() {
			uni.navigateTo({
				url: '/pages/Union/Union'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-select {
	background: #2E2E2E;
	border-radius: 38rpx;
}
::v-deep .uni-select__input-text {
	font-size: 24rpx;
	font-weight: 700;
	color: #9E9E9E;
}

::v-deep .uni-select__selector {
	color: #9E9E9E;
	font-size: 24rpx;
	font-weight: 700;
	border-radius: 38rpx;
	background: #2E2E2E;
}
::v-deep .uni-select__selector-item {
	border-radius: 38rpx;
	background: #2E2E2E !important;
}
::v-deep .uni-popper__arrow {
	top: 0;
	left: 1000rpx;
}
::v-deep .uni-input-placeholder{
	margin-top:6rpx;
}
 ::v-deep .uni-input-input{
		margin-top: 3rpx;
	}
page{
	background: #1a1a1a;
}
.conter {
	padding-top:30rpx;
	box-sizing: border-box;
	.xieyi {
		width: 80%;
		color: #787f8e;
		margin-top: 36rpx;
		font-size: 21rpx;
		margin-left: 8%;
		font-family: 'font';
		font-weight: 400;
	}
	.group {
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		margin-top: 3rpx;
		margin-left: 170rpx;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
		opacity: 1;
	}
	.conterone {
		width: 680rpx;
		text-align: center;
		margin: 0 35rpx;
		height: 766rpx;
		background: linear-gradient(180deg, #191919 0%, #282828 100%);
		border-radius: 52rpx;
		opacity: 1;
		border: 3rpx solid #2F2F2F;
		.tian-avatar{
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
			margin: 52rpx auto 0;
		}
		.title-class{
			margin: 34rpx auto 69rpx;
			height: 42rpx;
			font-size: 35rpx;
			font-family: zcoolqingkehuangyouti, zcoolqingkehuangyouti;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 42rpx;
		}
		.contertow {
			font-size: 30rpx;
			text-align: center;
			color: #ffffff;
			font-weight: 800;
			font-family: 'font';
			margin-top: -42rpx;
		}
	}

	.input {
		position: relative;
		.icon-pass {
			width: 467rpx;
			margin: 0 auto;
			height: 77rpx;
			background: #2e2e2e;
			border-radius: 413rpx 413rpx 413rpx 413rpx;
			opacity: 1;
			border: 2rpx solid #ffffff;
		}
	}

	.vehicle {
		position: absolute;
		margin-top: -56rpx;
		color: #9c9b9b;
		font-weight: 800;
		font-family: 'font';
		right: 168.44rpx;
	}

	.demand {
		color: #ffffff;
		font-weight: 400;
		font-family: 'font';
		padding: 45rpx 0 0 0;
		display: flex;
		margin:0 150rpx;
		.need-box {
			margin-top:4rpx;
			height: 37rpx;
			font-size: 31rpx;
			font-family: 'zcoolqingkehuangyouti, zcoolqingkehuangyouti';
			font-weight: 400;
			color: #ffffff;
		}
		.select {
			width: 222rpx;
			background: #2E2E2E;
			opacity: 1;
			text-align: center;
			color: #fff !important;
			border-radius: 38rpx;
			margin-top: -10rpx;
			margin-left: 15rpx;
		}
	}

	.demandone {
		padding: 130rpx 0 0 0;
		font-size: 21rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		color: #9E9E9E;
	}

	.buttons {
		width: 680rpx;
		height: 117rpx;
		background: #EEF862;
		border-radius: 392rpx 392rpx 392rpx 392rpx;
		opacity: 1;
		font-size: 42rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 700;
		color: #353535;
		line-height: 117rpx;
		position: absolute;
		bottom: 45rpx;
		text-align: center;
	}

	// 弹框
	.close {
		width: 645rpx;
		height: 445rpx;
		background: #1A1A1A;
		text-align: center;
		border-radius: 35rpx 35rpx 35rpx 35rpx;
		opacity: 1;
		border: 3rpx solid #ACACAC;
		.uniName{
			margin-top: 41rpx;
			height: 38rpx;
			font-size: 45rpx;
			font-family::"zcoolqingkehuangyouti, zcoolqingkehuangyouti";
			font-weight: 400;
			color: #FFFFFF;
			line-height: 38rpx;
		}
		.clmona {
			font-weight: 400;
			text-align: center;
			color: #ffffff;
			font-family: 'font';
			margin-top: 92rpx;
		}

		.clpmklj {
			display: flex;
			margin: 108rpx 0 41rpx 0;
			button {
				width: 227rpx;
				height: 77rpx;
				background: #EEF862;
				border-radius: 17rpx;
				opacity: 1;
				font-size: 31rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 700;
				color: #FFFFFF;
				line-height: 77rpx;
			}
		}
	}
}
</style>
